<template>
  <div class="information">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="日报" name="first">
        <dailyComponent
          ref="childeRef"
          v-if="activeName === 'first'"
          :activeIndex="activeIndex"
        ></dailyComponent
      ></el-tab-pane>
      <el-tab-pane label="周报" name="second">
        <dailyComponent
          ref="childeRef"
          v-if="activeName === 'second'"
          :activeIndex="activeIndex"
        ></dailyComponent
      ></el-tab-pane>
      <el-tab-pane label="月报" name="third">
        <dailyComponent
          ref="childeRef"
          v-if="activeName === 'third'"
          :activeIndex="activeIndex"
        ></dailyComponent
      ></el-tab-pane>
      <el-tab-pane label="会议" name="fourth"
        ><meeting
          ref="childeRef"
          v-if="activeName === 'fourth'"
          :activeIndex="activeIndex"
        ></meeting
      ></el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onBeforeUnmount, onMounted } from "vue";
import type { TabsPaneContext } from "element-plus";
// @ts-ignore
import dailyComponent from "./daily/daily.vue";
// @ts-ignore
import meeting from "./daily/meeting.vue";
import {
  useRouter,
  useRoute,
  onBeforeRouteLeave,
  onBeforeRouteUpdate,
} from "vue-router";

const route = useRoute();
const router = useRouter();
let activeName = ref("");
let childeRef = ref(null);

let activeIndex = ref("");

const handleClick = (tab, event) => {
  // @ts-ignore
  childeRef.value!.status = "my";
  router.replace({
    query: {
      statu: "my",
    },
  });

  activeIndex.value = tab.index;

  activeName.value = tab.props.name;
  sessionStorage.setItem("activeTab", activeName.value);
  sessionStorage.setItem("activeIndex", activeIndex.value);
};

const activeTab = sessionStorage.getItem("activeTab");
const acndex = sessionStorage.getItem("activeIndex");
activeName.value = activeTab || "first";
activeIndex.value = acndex || "0";

onMounted(() => {
  // sessionStorage.removeItem("activeTab");
  // sessionStorage.removeItem("activeIndex");
});

onBeforeRouteLeave((to, from, next) => {
  const allowedPaths = [
    "/project/information",
    "/myProject/information-info/details",
    "/myProject/information-info/add",
    "/myProject/information-info/addMeeting",
    "/myProject/information-info/addfile"
  ];
  if (!allowedPaths.includes(to.path)) {
    sessionStorage.removeItem("activeTab");
    sessionStorage.removeItem("activeIndex");
  }
  next();
});
</script>
<style >
.el-tabs__header {
  padding: 10px 20px 0px 20px;
  position: relative;
}
</style>
<style lang="scss" scoped>
.information {
  // padding:5px;
}
</style>


